<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: rgb(235, 235, 235);
        }

        form {
            width: 600px;
            height:480px;
            background-color: white;
            padding: 20px;
            box-sizing: border-box;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            /* 相对于现在所处位置的位移变化，x便偏移自己宽度的50%，y偏移自己高度的50% */
        }

        h2 {
            margin-bottom: 20px;
            text-align: center;
        }

        form input {
            width: 100%;
            height: 25px;
            display: block;
            margin-bottom: 20px;
            padding-left: 10px;
            box-sizing: border-box;
        }

		.sex_div {
			display: flex;
			align-content: flex-start;
		}
		.sexinp {
			width: 50px;
			display: flex;
			align-content: flex-start;
			margin-right: 50px;
		}
		.sexinp input {
			width: 25px;
            height: 25px;
            display: block;
            margin-left: 20px;
            margin-bottom: 20px;
            padding-left: 10px;
            box-sizing: border-box;
        }
        .mya {
            width: 100%;
            height: 30px;
            margin-bottom: 20px;
        }

        .mya a:nth-child(1) {
            float: left;
        }

        .mya a:nth-child(2) {
            float: right;
        }
        label{
            width: 50px;
            height: 5px;
        }

        button {
            width: 100%;
            height: 40px;
            background-color: rgb(235, 235, 235);
            border: none;
        }

        button:active {
            box-shadow: 0 0 3px rgb(173, 172, 172);
            /* x偏移  y偏移  模糊值 颜色 */
        }
    </style>

</head>

<body>
<form action="/xiaohongshu2_Web_exploded/registerServlet" method="post">
    <h2>注册界面</h2>
    <input name="username" type="text" placeholder="请输入用户名"require>
    <input name="password" type="text" placeholder="请输入密码"required>
    <input name="name" type="text" placeholder="请输入真实姓名"required>
    <div class="sex_div">
    	<label>性别</label>
    	<div class="sexinp">男<input type="radio" name="sex" value="male"></div>
    <div class="sexinp">女<input type="radio" name="sex" value="female"></div>
    </div>
                
    <div class="mya">
    </div>
    <input id="login-btn" type="submit" value="注册">
</form>


<script>
    // let 定义一个变量
    let username = document.getElementById('username')
    let password = document.getElementById('password')
    let loginBtn = document.getElementById('login-btn')
    // js里面不允许出现 -
    //一般的交互事件
    // onclick 点击事件
    // onmousemove  鼠标移入事件
    // onmouseout  鼠标移出事件
    // ondblclick  双击事件
    // onfocus  input框获取焦点事件
    // onblur  失焦事件


    loginBtn.onclick = function() {
        let usernamevalue = username.value
        let passwordvalue = password.value
        // console.log(usernamevalue, passwordvalue)
        // 便于检查的时候判断是否成功
        if (!usernamevalue) {
            return alert('请输入正确的用户名')
            //return 跳出当前函数，并且返回后面的值
        }
        console.log(usernamevalue, passwordvalue)

    }
</script>

</body>
</html>